<!--
 * @Date: 2023-02-27 19:06:54
 * @LastEditors: mengqingchen mengqc1995@163.com
 * @LastEditTime: 2023-03-07 14:32:21
 * @FilePath: \sososn-web-new\src\views\bulkIndustry\component\industrialValue.vue
-->
<template>
  <div class="group">
    <h1 class="title" data-aos="fade-up">产品价值</h1>
    <ul class="list" data-aos="fade-up" data-aos-delay="100">
      <li v-for="(el, i) in valueList" :key="i" class="item">
        <ul>
          <li><img :src="el.imgUrl" alt="" /></li>
          <li class="item-title">{{ el.title }}</li>
          <li class="item-desc">
            {{ el.desc }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script setup>
const { industrialValue } = inject('productData')
let valueList = industrialValue.valueList
</script>

<style lang="scss" scoped>
.group {
  padding: 80px 0 118px;
  background: #fff;

  .title {
    margin-bottom: 70px;
    font-family: PingFangSC-Medium, 'PingFang SC';
    font-size: 38px;
    font-weight: 500;
    color: #333;
    text-align: center;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 277px;
    gap: 116px 74px;

    .item {
      width: 406px;
      // margin: 0 37px 116px;

      li {
        margin-bottom: 24px;
        text-align: center;
      }

      .item-title {
        font-family: PingFangSC-Medium, 'PingFang SC';
        font-size: 24px;
        font-weight: 500;
        color: #333;
      }

      .item-desc {
        font-family: PingFangSC-Regular, 'PingFang SC';
        font-size: 20px;
        font-weight: 400;
        color: #999;
      }
    }
  }
}
</style>
